<template>
	<div class="article">
		<operate-bar/>
		<img
		  src="../../assets/muyu.jpg"
		  draggable="false"
		  :class="{'lowScale':isDown}"
		  @mousedown="articleDown"
		  @mouseup="articleUp"
		  class="_cancelDrag">
		<div class="trigger-text-box">
			<div v-for="item in messages" class="item" :class="{'move':item.isMove}" :key="item.key">
				<span>{{ item.text }}</span>
			</div>
		</div>
		<options-bar/>
	</div>
</template>

<script setup lang="ts">
import tag from './modules/text-tag.ts'
import operateBar from '@/layout/operate-bar/index.vue'
import optionsBar from '@/layout/options-bar/index.vue'
interface messageItem {
	text: string,
	isMove: Ref<boolean>,
	key: number
}
const props = defineProps({
	// 展示文字样式
	triggerText: {
		type:String,
		default: '不知道'
	}
})
const emit = defineEmits(["totalClick"])
// 鼠标是否按下
let isDown: Ref<boolean> = ref(false)

// 文字数组
const messages:Ref<messageItem[]> = ref([])

// 鼠标按下
const articleDown = () => {
	isDown.value = true
}
// 鼠标抬起
const articleUp = ()=>{
	isDown.value = false
	messages.value.push(new tag(props.triggerText , ()=>{
		messages.value.splice(0,1)
	}))
	emit('totalClick')
}

</script>
<style lang="scss" scoped>
.article{
	width: 200px;
	height: auto;
	background-color: #000000;
	position: relative;
	img{
		width: 100%;
		height: 100%;
		transform: scale(0.75);
		&.lowScale{
			transform: scale(0.70);
		}
	}
	.trigger-text-box{
		position: absolute;
		right: 0;
		top: 0;
		width: 70px;
		height: 50px;
		.item{
			font-size: 18px;
			position: absolute;
			color: #ffffffb7;
			transform: translate(0,30px);
			transition: transform 1.5s ease-in-out;
			&.move{
				transform: translate(0,-40px);
			}
		}
	}
}
</style>